<template>
  <div class="container">
    <div v-html="htmlContent"></div>
  </div>

</template>

<script>
import { getArticle } from "@/api/blog";
import md from '@/utils/markdown';
import usePostStore from '@/store/modules/post';

export default {
  name: "ArticleView",
  data(){
    return {
      htmlContent:''
    }
  },
  methods:{
    loadArticle(url) {
      getArticle(url).then(response =>{
        this.htmlContent = md.render(response.data)
      });

    }
  },
  created(){
  },
  mounted() {
    const post = usePostStore();
    this.loadArticle(post.url);
  }
}
</script>

<style scoped>
.container{
  max-width: 780px;
  width: 100%;
  min-height: 700px;

  padding: 30px 0;
  margin: 10px auto;

  flex-grow: 1;
}

</style>
